<template>
	<view class="container">
		<!-- 顶部欢迎栏 -->
		<view class="header">
			<view class="header-title">首页</view>
			<view class="header-row">
				<image class="avatar" src="/static/shop_avatar.png" />
				<text class="welcome">大美汽修厂，欢迎您</text>
			</view>
		</view>
		<!-- 功能区 -->
		<view class="func-card">
			<view class="func-row">
				<view class="func-item" style="border-right:1px solid #f2f2f2;">
					<image class="func-icon" src="/static/scan.png" />
					<text class="func-label">扫码核销</text>
				</view>
				<view class="func-item" @click="goXiaohe">
					<image class="func-icon" src="/static/input.png" />
					<text class="func-label">输入核销码</text>
				</view>
			</view>
		</view>
		<!-- 九宫格功能区 -->
		<view class="grid-card">
			<view class="grid-row">
				<view class="grid-item" @click="goMoney">
					<image class="grid-icon" src="/static/statistics.png" />
					<text class="grid-label">经营统计</text>
				</view>
				<view class="grid-item">
					<image class="grid-icon" src="/static/record.png" />
					<text class="grid-label">核销记录</text>
				</view>
				<view class="grid-item">
					<image class="grid-icon" src="/static/bill.png" />
					<text class="grid-label">收支明细</text>
				</view>
				<view class="grid-item badge">
					<image class="grid-icon" src="/static/order.png" />
					<text class="grid-label">订单管理</text>
					<view class="badge-dot">12</view>
				</view>
			</view>
			<view class="grid-row">
				<view class="grid-item">
					<image class="grid-icon" src="/static/card.png" />
					<text class="grid-label">卡券管理</text>
				</view>
				<view class="grid-item badge">
					<image class="grid-icon" src="/static/repair.png" />
					<text class="grid-label">维修任务</text>
					<view class="badge-dot">12</view>
				</view>
				<view class="grid-item">
					<image class="grid-icon" src="/static/evaluate.png" />
					<text class="grid-label">评价管理</text>
				</view>
				<view class="grid-item">
					<image class="grid-icon" src="/static/info.png" />
					<text class="grid-label">商户资料</text>
				</view>
			</view>
			<view class="grid-row">
				<view class="grid-item">
					<image class="grid-icon" src="/static/activity.png" />
					<text class="grid-label">活动发布</text>
				</view>
			</view>
		</view>
		<!-- 最新通知 -->
		<view class="notice-card">
			<view class="notice-header">
				<view class="notice-title">
					<image class="notice-icon" src="/static/notice.png" />
					<text>最新通知</text>
				</view>
				<view class="notice-today">
					<text class="today-red">今日需上门取车任务共32单</text>
					<text class="arrow">&gt;</text>
				</view>
			</view>
			<view class="notice-table">
				<view class="notice-table-header">
					<text class="th">用户</text>
					<text class="th">服务项目</text>
					<text class="th">时间</text>
				</view>
				<view class="notice-table-row" v-for="(item, idx) in noticeList" :key="idx">
					<text class="td">{{item.user}}</text>
					<text class="td">{{item.service}}</text>
					<text class="td">{{item.time}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
const noticeList = [
	{ user: '张先生', service: '汽车美容、基础保养', time: '2022-03-10 11:09' },
	{ user: '张先生', service: '汽车精细', time: '2022-03-10 11:09' },
	{ user: '张先生', service: '车辆维修-上门取车', time: '2022-03-10 11:09' },
	{ user: '张先生', service: '汽车美容、基础保养', time: '2022-03-10 11:09' },
	{ user: '张先生', service: '车辆维修-到店维修', time: '2022-03-10 11:09' },
];
const goMoney = () => {
	uni.navigateTo({ url: '/pages/lsa/money/money' });
};
const goXiaohe = () => {
	uni.navigateTo({ url: '/pages/lsa/xiaohe/xiaohe' });
};
</script>

<style scoped>
.container {
	min-height: 100vh;
	background: #f7f7f7;
}
.header {
	background: #238aff;
	padding: 60rpx 0 30rpx 0;
	border-bottom-left-radius: 40rpx;
	border-bottom-right-radius: 40rpx;
	text-align: center;
}
.header-title {
	color: #fff;
	font-size: 40rpx;
	font-weight: bold;
	margin-bottom: 20rpx;
}
.header-row {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}
.avatar {
	width: 120rpx;
	height: 120rpx;
	border-radius: 50%;
	border: 4rpx solid #fff;
	margin-right: 24rpx;
	background: #eee;
}
.welcome {
	color: #fff;
	font-size: 32rpx;
}
.func-card {
	background: #fff;
	border-radius: 24rpx;
	margin: -40rpx 24rpx 24rpx 24rpx;
	box-shadow: 0 4rpx 16rpx #e6e6e6;
	overflow: hidden;
}
.func-row {
	display: flex;
	flex-direction: row;
	align-items: center;
}
.func-item {
	flex: 1;
	text-align: center;
	padding: 36rpx 0;
}
.func-icon {
	width: 80rpx;
	height: 80rpx;
	margin-bottom: 12rpx;
}
.func-label {
	display: block;
	color: #333;
	font-size: 28rpx;
}
.grid-card {
	background: #fff;
	border-radius: 24rpx;
	margin: 0 24rpx 24rpx 24rpx;
	padding: 24rpx 0 0 0;
}
.grid-row {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	margin-bottom: 24rpx;
}
.grid-item {
	flex: 1;
	text-align: center;
	position: relative;
}
.grid-icon {
	width: 90rpx;
	height: 90rpx;
	margin-bottom: 10rpx;
}
.grid-label {
	display: block;
	color: #333;
	font-size: 26rpx;
}
.badge-dot {
	position: absolute;
	top: 0;
	right: 38rpx;
	background: #ff4d4f;
	color: #fff;
	font-size: 20rpx;
	border-radius: 50%;
	padding: 2rpx 10rpx;
	min-width: 32rpx;
	text-align: center;
}
.notice-card {
	background: #fff;
	border-radius: 24rpx;
	margin: 0 24rpx 24rpx 24rpx;
	padding: 24rpx;
}
.notice-header {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 18rpx;
}
.notice-title {
	display: flex;
	align-items: center;
	font-size: 28rpx;
	color: #333;
}
.notice-icon {
	width: 32rpx;
	height: 32rpx;
	margin-right: 8rpx;
}
.notice-today {
	display: flex;
	align-items: center;
}
.today-red {
	color: #ff4d4f;
	font-size: 26rpx;
	margin-right: 8rpx;
}
.arrow {
	color: #ff4d4f;
	font-size: 32rpx;
}
.notice-table {
	margin-top: 8rpx;
}
.notice-table-header {
	display: flex;
	flex-direction: row;
	color: #888;
	font-size: 26rpx;
	border-bottom: 1px solid #f2f2f2;
	padding-bottom: 10rpx;
}
.notice-table-row {
	display: flex;
	flex-direction: row;
	color: #333;
	font-size: 26rpx;
	padding: 16rpx 0;
	border-bottom: 1px solid #f7f7f7;
}
.th {
	flex: 1;
	text-align: left;
}
.td {
	flex: 1;
	text-align: left;
}
</style>
